<template>
  <div>
    <div class="home-start">
        <div    type="button"
                class="bt-start" 
                @touchend="handleclick"
                >
                <svg class="icon face-icon" >
                <use xlink:href="#iconrenlianshibie"></use>
                 </svg></div>  
        <form method="post" >
          <input type="file" accept="image/*" enctype="multipart/form-data"
               name="file"
               style="display:none" 
               ref="uploadfile"
               @change="getfiles()" />
        </form>  
        <router-link to="/record" tag="div" class="notes">
          <svg class="icon face-icon" >
                <use xlink:href="#iconjishiben"></use>
          </svg></router-link>    
    </div>  
  </div>
</template>

<script>
import axios from 'axios'
import {mapState} from 'vuex'


export default {
  name: 'homestart',
  data() {
    return {
     msg:'我是home组件的值',
     backdata:{},
     img_url:'',
    
    }
  },
  computed:{
      ...mapState(['addr','username'])
    },

  methods:{
      nofaceMsg() {
        this.$message({
          showClose: true,
          message: '未检测到人脸哟！',
          duration:4000,
        });
      },
       trans(){
         setTimeout(()=>{
          this.$bus.$emit('eventBus',this.backdata)
         },100)   //这里用一个延时执行，让取值页面create()之后再emit自定义的事件，保证能on监听到自定义事件

    /* 我们一般都是在B页面的created方法里面去使用on监听自定义事件，但是通过上面那段话我们知道，当我们在create方法
    里面监听事件的时候on监听自定义事件，当我们在create方法里面监听事件的时候emit事件已经发出去了，此时监听器还没有注册，
    那么要让on监听到A页面的on监听到A页面的emit发出的事件，可以在A页面的beforeDestory或destroyed去执行$emit */
        this.$router.push('/camera')
       },

       handleclick(){
         this.$refs.uploadfile.click() 
    
       },
       getfiles(){
         this.file = this.$refs.uploadfile.files[0] 
         var formData = new FormData()  //创建一个表单数据的对象格式，以表单的方式传值
         formData.append("file",this.file)
         formData.append("addr_name",this.addr)
         formData.append("username",this.username)
         axios({
           method:'post',
           url:'/api/class/getImg',
          //  withCredentials:true,  //最终一个朋友帮我get到问题点了，是需要设置 withCredentials：true , 表示跨域请求时是否需要使用凭证. 默认为false
           headers:{'Content-Type':'multipart/form-data'},
           data:formData,
         })
         .then((res)=>{
           if (res.status == 200 && res.data == '未检测到人脸') {
             this.nofaceMsg()
             
           } else{
             this.backdata = res.data
             //console.log(this.img_byte)
             this.trans()
           }
          // console.log({"class":this.addr,"file":formData})
         })
  },    
},   
}
</script>

<style scoped>
    .home-start{
      float: top;
      
    }
    .bt-start{
        position: relative;
        top: .4rem;
        float: left;
        text-align: center;
        background:#eee ;
        height: 1.2rem;
        line-height: 1.2rem;
        width: 23.5%;
        margin-left: 15%;
        border-radius: .2rem;
        font-size: .36rem;
        box-shadow: 0px 1px 3px rgba(20, 17, 17, 0.3);
    }
    .notes{
        position: relative;
        top: .4rem;
        float: right;
        text-align: center;
        background: rgb(233, 240, 241);
        width: 23.5%;
        margin-right: 15%;
        border-radius: .2rem;
        font-size: .36rem;
        box-shadow: 0px 1px 3px rgba(34, 25, 25, 0.3);
    }
    .face-icon{
      font-size: 1.2rem;
    }
    .notes-icon{
      font-size: 1.2rem;
    }
</style>